<template>
	<view class="header-bg-image header-bg">
		<view style="height: 50rpx;"></view>
		<view class="padding-30">
			<view class="margin-30-0 flex-around" @click="$tools.navigateBack()">
				<u-icon name="arrow-left" color="#333333" size="20"></u-icon>
				<view class="fontSize-18 color-000 flex1 text-center">祈福记录</view>
				<view style="width: 40rpx;"></view>
			</view> 
			<view class="prayer-view" style="background: url('https://wudang.chunchuangkeji.cn/image/31.png') no-repeat; background-size: 100% 100%;">
				<template v-if="chooseTabStatus == '视频'">
					<view class="prayer-image-view border-radius10" v-if="prayerDetail.video">
						<video :src="prayerDetail.video"></video>
					</view>
					<view class="empty-view flex-justAliCenter-column" v-else>
						<image class="img-160" src="../../../static/image/30.png" mode=""></image>
						<view class="fontSize-15 color-999">暂无祈福内容</view>
					</view>
				</template>
				<template v-else>
					<view class="prayer-image-view border-radius10" v-if="prayerDetail.image">
						<image class="prayer-image" :src="prayerDetail.image" mode=""></image>
					</view>
					<view class="empty-view flex-justAliCenter-column" v-else>
						<image class="img-160" src="../../../static/image/30.png" mode=""></image>
						<view class="fontSize-15 color-999">暂无祈福内容</view>
					</view>
				</template>	
				
				<view class="flex-center margin-top50">
					<view class="chooseItem flex-center margin-right20":class="chooseTabIndex == index?'chooseItem1':''"
					v-for="(item,index) in chooseTabList" :key="index" @click="handleChooseTab(index)">{{item.name}}</view>
				</view>
				
				<view class="empty-view1 margin-top150"> 
					<view class="flex-between margin-bottom30">
						<view>祈福物品</view>
						<view>{{prayerDetail.goods.title}}</view>
					</view>
					<view class="flex-between margin-bottom30">
						<view>祈福金额</view>
						<view class="color-FE3232">￥{{prayerDetail.goods.price}}</view>
					</view>
					<view class="flex-between margin-bottom30">
						<view>祈福道观</view>
						<view>{{prayerDetail.store_title}}</view>
					</view>
					<view class="flex-between">
						<view>祈福时间</view>
						<view>{{prayerDetail.updatetime}}</view>
					</view>
				</view>
				
				<view style="height: 150rpx;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				id:'',
				prayerDetail:{},
				chooseTabList:[
					{name:'视频'},
					{name:'图片'}
				],
				chooseTabIndex:0,
				chooseTabStatus:'视频',
				// 图片域名
				baseUrlImage:''
			}
		},
		onLoad(e) {
			if(e.id){
				this.id = e.id
				this.getPrayDetail(this.id)
			}
			this.baseUrlImage = this.$api.uploadImage
			console.log(e)
		},
		methods:{
			async getPrayDetail(id){
				let res = await this.$http.post(this.$api.pray_detail,{id:id},{token:true})
				console.log(res)
				this.prayerDetail = res.data
			},
			handleChooseTab(index){
				this.chooseTabIndex = index
				if(index == 0){
					this.chooseTabStatus = '视频'
				}else{
					this.chooseTabStatus = '图片'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.prayer-image{
		width: 100%;
		height: 100%;
	}
	.prayer-image-view{
		width: 100%;
		height: 560rpx;
		overflow: hidden;
	}
	.chooseItem1{
		width: 150rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background-color: #F8F6F3 !important;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		border: 1rpx solid #967C5E;
	}
	.chooseItem{
		width: 150rpx;
		height: 60rpx;
		border-radius: 10rpx;
		background-color: #E5DDD4;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
	}
	.empty-view1{
		background: #F8F6F3;
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		border: 2rpx solid #967C5E;
		padding: 30rpx;
	}
	.empty-view{
		// width: 610rpx;
		width: 100%;
		height: 560rpx;
		background: #F8F6F3;
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		border: 2rpx solid #967C5E;
	}
	.prayer-view{
		flex: 1;
		padding: 40rpx;
		height: calc(100vh - 300rpx);
	}
</style>